<template>
  <div class="dropdown-select">
    <a-row type="flex" :gutter="[16, 0]">
      <a-col>
        <el-button
          v-for="(item, index) in tabs"
          :key="index"
          :disabled="index === 1 || index === 2"
          :type="activeIndex !== index ? 'text' : ''"
          :class="['tab-button', { 'active-bgcolor': activeIndex === index }]"
          @click="onSwitchTab(index)"
        >
          <span :class="['iconfont', 'mr10', `icon-${item.icon}`]"></span>
          {{ item.label }}
        </el-button>
      </a-col>
      <a-col class="dropdown-main">
        <div
          class="dropdown-content"
          :style="{ width: activeIndex === 0 ? 'fit-content' : '100%' }"
        >
          <unit-structure
            v-bind="$attrs"
            v-on="$listeners"
            ref="selectTree"
            v-if="activeIndex === 0"
          />
          <tags-options v-on="$listeners" v-else :data="options" />
        </div>
      </a-col>
    </a-row>
    <div class="slot-btn">
      <slot name="button">
        <!-- <a-button class="mr10">取消</a-button>
                    <a-button type="primary">确定</a-button> -->
      </slot>
    </div>
  </div>
  <!-- <a-empty class="empty-type dropdown-select" v-else /> -->
</template>
<script>
import tagsOptions from "./tags.vue";
import unitStructure from "./DropdownTree.vue";

export default {
  name: "DropdownSelect",
  inject: ["reload"],
  data() {
    return {
      activeIndex: 0
    };
  },
  components: {
    tagsOptions,
    unitStructure
  },
  props: {
    tabs: {
      type: Array,
      default() {
        return [];
      }
    },
    // showSel: {
    //     type: Boolean,
    //     default: false
    // },
    options: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  mounted() {
    // this.reload(); // 刷新模块
  },
  methods: {
    onSwitchTab(index) {
      if (this.activeIndex === index) return;
      this.activeIndex = index;
    }
  }
};
</script>
  
<style lang="less" scoped>
.dropdown-select {
  position: absolute;
  top: 54px;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-height: 367px;
  padding: 10px 19px;
  background-color: #ffffff;
  z-index: 1000;
  border-radius: 6px;
  > div.ant-row-flex {
    height: 100%;
  }
  .tab-button {
    display: block;
    width: 133px;
    font-family: PingFangSC-Regular, PingFang SC;
    color: rgba(0, 0, 0, 0.85);
    margin: 0;
    padding: 12px 40px 12px 10px;
    margin-bottom: 5px;
    font-size: 14px;

    /deep/ span {
      display: flex;
      align-items: center;

      .iconfont {
        font-size: 1.2em;
      }
    }
  }

  button.active-bgcolor {
    color: #ffffff;
  }

  .dropdown-main {
    width: calc(100% - 150px);
    height: 100%;
    .dropdown-content {
      min-width: 350px;
      width: fit-content;
      height: 100%;
      background: #ffffff;
      border-radius: 4px;
      border: 1px solid #e5ebf1;
    }
  }

  .active-bgcolor {
    background-color: #3d6cf7;
  }

  // 按钮插槽
  .slot-btn {
    position: absolute;
    right: 30px;
    bottom: 20px;
  }
}

.empty-type {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>
  